<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>视频详情</title>
<link rel="stylesheet" href="./static/css/common.css">
<style>
    .viedoBox{
      height: 230px;
    }
    .header{
     padding: 10px 15px;
   }
   .user{
     display: flex;
     padding:10px 15px;
     align-items:center;
     border-top: 1px solid #F1F0F0;
     border-bottom: 1px solid #F1F0F0;
   }
   .user .headbox{
     width: 34px;
     height: 34px;
     border-radius: 17px;
     overflow: hidden;
   }
   .user .userHead{
     display: inline-block;
     width: 100%;
     height: 100%;
   }
   .user .userInfo{
     color: #535252;
     margin-left:10px;
     flex: 1;
   }
   .viedoList{
     margin:10px 15px;
   }
   .listbox{
     display: flex;
     margin:10px 0;
     align-items: center
   }
   .listbox .left {
     width: 120px;
     border-radius: 4px;
     overflow: hidden;
     height: 80px;
     margin-right: 10px;
   }
   .listbox .right{
     flex:1;
   }
   .listbox .left img{
      display: inline-block;
      width: 100%;
      height: 100%;
   }
</style>
    
</head>
<body>
  <div id="app" v-cloak>
    <div class="viedoBox">
        <video :src="source_url" :poster="source_thum" width="100%" height="240" style="margin-top:-14px" controls="controls">
          Your browser does not support the video tag.
        </video>
    </div>
    <div class="header">
        <h4 class="font4">{{title}}</h4>
        <div class="font3">
            {{center}}
        </div>
    </div>
    <div class="user">
      <div class="headbox"><img class="userHead" :src="user.userHeader" alt=""></div>
      <div class="userInfo">
        <div class="userName">{{user.userNick}}</div>
      </div>
      <a :href="appUrl" id="appBtn" type="button" >关注</a>
    </div>
    <div class="viedoList">
        <h4 class="font4">推荐</h4>
        <div v-for="item in lists" :key="item.id" @click="goVideo(item.id)" class="listbox">
          <div class="left"><img :src="item.source_thum" alt=""></div>
          <div class="right"><h4 class="font4">{{item.title}}</h4></div>
        </div>
    </div>
    <div class="footBox">
      <img src="./static/image/logo.png" alt="">
      <div class="center">
        <h5>牙记</h5>
        <div class="fixBoton">牙套计时分享社区</div>
      </div>
      <a :href="appUrl" class="lastBox">立即体验</a>
    </div>
  </div>
  <script src="./static/js/vue.js"></script>
  <script src="./static/js/axios.js"></script>
  <script>
    new Vue({
      el:'#app',
      data:{
        appUrl:'https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1130246825',
        source_url:'',
        source_thum:'',
        title:'',
        center:'',
        user:{
          userHeader:'',
          userNick:'',
          createdAt:'',
          getTime:''
        },
        lists:[]
      },
      created() {  
        this.renders()
      },
      methods:{
        renders(){
          let url = location.href.split('?');
          let id = '';
          document.title = '视频详情';
          Object.keys(url).forEach(function(key){
            if(url[key].indexOf('id=') > -1){
              id = url[key].split('=')
              id = parseInt(id[1])
            }
          });
          axios.get(`https://www.yajiapp.com:8443/super_yaji/video/wap/${id}`)
          .then(res =>{
            this.source_thum = res.data.data.video.source_thum;
            this.source_url = res.data.data.video.source_url;
            this.title = res.data.data.video.title
            this.center = res.data.data.video.description;
            this.user.userHeader = res.data.data.userInfo.userHeader  ;
            this.user.userNick = res.data.data.userInfo.userNick;
            console.log(res.data.data)
          })
          axios.get('https://www.yajiapp.com:8443/super_yaji//video/wap/recommend')
          .then(res => {
            console.log(res.data.data)
            this.lists = res.data.data
          });
          const  ua = navigator.userAgent.toLowerCase();	
          if (/iphone|ipad|ipod/.test(ua)) {
            this.appUrl = 'https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1130246825';
          } else if (/android/.test(ua)) {
          this.appUrl = 'https://a.app.qq.com/o/simple.jsp?pkgname=com.grzx.toothdiary&from=groupmessage'
          }
        },
        time(val) {
          const now =  new Date(val)
          const month = now.getMonth()+1;
          const date = now.getDate();
            
          return `${month}月 ${date}日`
        },
        goVideo(id) {
          console.log(id)
          window.location = 'index.html#/Mvideo?id='+id;
          this.renders()
        }
      }
    })
  </script>
</body>
</html>